import React from 'react'; 

import '../assets/css/index.css'

class TODOList2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            list: []
         };
    }
    addData = () => {
        var tmpList = this.state.list;  
        tmpList.push(this.refs.title.value); //返回一个索引值
        this.refs.title.value = ''; //让input的值变为空  
        this.setState({
            list:  tmpList 
        })
    }
    removeData(key) {
        alert(key)
        var tmpList = this.state.list;  
        tmpList.splice(key, 1 )
        this.setState({
            list:  tmpList 
        })
    }
    render() {
        return (
            <div>
                <h2>React TodoList案例演示</h2>
                <input ref="title" /> <button onClick={this.addData}>增加+</button>
                <hr/>
                <ul className='list'>
                    {
                        this.state.list.map((value, key) => {
                            return (
                                <li key={key}>{value}    ---<button onClick={this.removeData.bind(this, key)}>删除-</button></li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default TODOList2;